<template>
  <div
    ref="dom"
    class="charts chart-radar"
    style="height: 190px; margin-top: 3%; background-color: #f6f7fb"

  ></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from '../theme.json'
import { on, off } from '@/libs/tools'
// echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartRadar',
  props: {
    value: Object,
    text: String,
    subtext: String,
    clickTag: String,
    xAxisData: Array,
    seriesData: Array,
    grid: Object,
    legend: Object,
    tooltip: Object,
    indicator: Array,
    radius: Number,
    num: Number,
    shape: String,
    color: String,
    indicatorMax: Array,
    legendData: Array
  },
  data () {
    return {
      dom: null
    }
  },
  watch: {
    value: {
      deep: true,
      handler (val) {
        this.initChart()
      }
    },
    text: {
      deep: true,
      handler (val) {
        this.initChart()
      }
    },
    series: {
      deep: true,
      handler (val) {
        this.initChart()
      }
    },
    indicator: {
      deep: true,
      handler (val) {
        this.initChart()
      }
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    initChart () {
      let that = this
      this.dom = echarts.init(this.$refs.dom, 'tdTheme')
        this.dom.showLoading({
          text: 'loading',
          color: '#2D8CF0',
          textColor: '#000',
          maskColor: 'rgba(255, 255, 255, 0.2)',
          zlevel: 0,
        })
      this.$nextTick(() => {
        console.log(that.value)
        let yData = that.value.yData
        let legendData = []
        console.log(this.indicator)
        for (let i in yData) {
          legendData.push(yData[i].name)
        }
        let color1 = [
          'rgba(83,131,255,.2)',
          'rgba(255,199,92,.2)',
          'rgba(243,119,94,.2)',
          'rgba(116,216,201,.2)',
          'rgba(172,136,253,.2)',
          'rgba(88,198,146,.2)',
          'rgba(255,97,127,.2)',
          'rgba(60,88,188,.2)',
          'rgba(92,213,245,.2)',
          'rgba(124,132,255,.2)'
        ]
        let color2 = [
          'rgba(83,131,255,.6)',
          'rgba(255,199,92,.6)',
          'rgba(243,119,94,.6)',
          'rgba(116,216,201,.6)',
          'rgba(172,136,253,.6)',
          'rgba(88,198,146,.6)',
          'rgba(255,97,127,.6)',
          'rgba(60,88,188,.6)',
          'rgba(92,213,245,.6)',
          'rgba(124,132,255,.6)'
        ]
        // let color2 = [
        //   '#5383FF',
        //   '#FFC75C',
        //   '#F3775E',
        //   '#74D8C9',
        //   '#AC88FD',
        //   '#59C692',
        //   '#FF617F',
        //   '#3C58BC',
        //   '#5CD5F5',
        //   '#7C84FF',
        // ]
        let c = 0
        for (let i in yData) {
          let areaStyle = { color: color1[c] }
          yData[i]['areaStyle'] = areaStyle
          if (c == 5) {
            c = -1
          }
          c++
        }
        let option = {
          title: {
            text: that.text,
            top: '8%',
            left: 'center',
            textStyle: {
              color: '#333',
              fontStyle: 'normal',
              fontWeight: 'bold',
              fontSize: 24
            }
          },
          color:color2,
          // [
          //   'rgba(91,143,249,.6)',
          //   'rgba(90,216,166,.6)',
          //   'rgba(246,189,22,.6)',
          //   'rgba(255,49,88,.6)',
          //   'rgba(29,185,196,.6)',
          //   'rgba(93,112,146,.6)'
          // ],
          tooltip: {},
          toolbox: {
            show: true,
            orient: 'vertical',
            y: 'center',
            right: '10px',
            feature: {
              make: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          legend: {
            data: legendData,
            y: '85%',
            x: 'center'
          },
          radar: {
            radius: '50%',
            name: {
              textStyle: {
                color: '#999',
                fontSize: 14
              }
            },
            indicator: this.indicator,
            splitArea: {
              show: false,
              areaStyle: {
                color: 'rgba(255,0,0,0)' // 图表背景的颜色
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                width: 1,
                color: '#efefef' // 设置网格的颜色
              }
            }
          },
          series: {
            type: 'radar',
            data: yData
          }
        }
        setTimeout(() => {
          // setOption前隐藏loading事件
          this.dom.hideLoading();
          this.dom.setOption(option, true)
        }, 1000);
        on(window, 'resize', this.resize)
      })
    }
  },
  mounted () {
    this.initChart()
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
